/*
 * @Author: wkwu2
 * @Date: 2020-03-25 16:26:00
 * @LastEditors: wkwu2
 * @LastEditTime: 2020-03-26 14:48:24
 * @Description: 
 */

 import React, { Component, createRef } from 'react';
 import { connect } from 'react-redux'
 import { CSSTransition } from 'react-transition-group'
 import { actionCreators } from './store'
 import betaPng  from '../../static/img/beta.png'
 import { 
    HeaderWrapper, 
    Logo,
    Nav,
    NavItem,
    NavSearch,
    WriteArticle,
    SignUp,
    SignIn,
    AppDownload,
    AppDownloadA,
    AppDownloadImg,
    NavSearchWrap,
    SearchInfo,
    SearchTitle,
    SearchTip,
    SearchSwitch,
    SearchItemWrap,
    SearchItem
 } from './style';



class Header extends Component {
    constructor(props) {
        super(props)
        this.switchIcon = createRef()
    }
    render() {
        const {focused, handleInputFoucs, handleInputBlur, list} = this.props
        return (
            <div style={{borderBottom:"1px solid #f0f0f0"}}>
                <HeaderWrapper>
                   <Logo />
                   <WriteArticle className="right btn">
                       <i className="iconfont">&#xe615;</i>
                       写文章
                   </WriteArticle>
                   <SignUp className="right btn">
                       注册
                   </SignUp>
                   <SignIn className="right btn">登录</SignIn>
                   <AppDownload className="right">
                       <AppDownloadA>
                           <AppDownloadImg src={betaPng} />
                       </AppDownloadA>
                   </AppDownload>
                   <NavItem className="right">
                       <i className="iconfont">&#xe636;</i>
                   </NavItem>
                   <Nav>
                       <NavItem className="left">
                           <i className="iconfont iconfontNav">&#xe786;</i>
                           首页
                       </NavItem>
                       <NavItem className="left">
                           <i className="iconfont iconfontNav">&#xe63d;</i>
                           下载App
                       </NavItem>
                       <NavItem className="left">
                           <NavSearchWrap >
                               <CSSTransition
                                   timeout={300}
                                   in={focused}
                                   classNames="slide"
                               >
                                   <NavSearch 
                                       onFocus={()=>{handleInputFoucs(list)}}
                                       onBlur = {handleInputBlur}
                                       className={focused?"focused":""}
                                   />
                               </CSSTransition>
                               <i className={focused?"iconfont focused zoom":"iconfont zoom"}>&#xe62d;</i>
                               { this.getAreaList() }
                           </NavSearchWrap>
                       </NavItem>
                   </Nav>
                   
                </HeaderWrapper>
            </div>
        );
    }
    getSearchItem() {
        const { list, page } = this.props
        const newPageList = []
        if (list.length) {
            for (let i = (page - 1) * 10; i < page*10; i++) {
                if (list[i]) {
                    newPageList.push(
                        <SearchItem key={list[i]}>{list[i]}</SearchItem>
                    )
                }
            }
            return newPageList
        } else {
            return null
        }
        
    }

    getAreaList() {
        const {focused, mouseIn, page, totalPage, mouseEnter, mouseLeave, switchSearchWord } = this.props
        if (focused ||mouseIn) {
            return (
                <SearchInfo onMouseEnter={ mouseEnter } onMouseLeave={ mouseLeave }>
                    <SearchTitle>
                        <SearchTip>热门搜索</SearchTip>
                        <SearchSwitch onClick={()=>{ switchSearchWord(page, totalPage, this.switchIcon)}}>换一批</SearchSwitch>
                        <i ref={this.switchIcon} className="iconfont switchIcon right">&#xe851;</i>
                    </SearchTitle>
                    <SearchItemWrap>
                        {this.getSearchItem()}
                    </SearchItemWrap>
                </SearchInfo>        
            )
        } else {
            return null
        }
        
    }
}


const mapStateToProps = (state) => {
    return {
        focused: state.getIn(["header", "focused"]),
        mouseIn: state.getIn(["header", "mouseIn"]),
        list: state.getIn(["header", "list"]).toJS(),
        page: state.getIn(["header", "page"]),
        totalPage: state.getIn(["header", "totalPage"]),
    }
}

const mapDispatchToProps = (dispatch) => {
     return {
        handleInputFoucs(list) {
            (list.length === 0) && dispatch(actionCreators.getSearchHotWord())
            dispatch(actionCreators.searchFocus())
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur())
        },
        mouseEnter() {
            dispatch(actionCreators.searchMouseEnter())
        },
        mouseLeave() {
            dispatch(actionCreators.searchMouseLeave())
        },
        switchSearchWord(page, totalPage, switchIcon) {
            const spin = switchIcon.current;
            const deg = +spin.style.transform.replace(/[^0-9]/ig,"")
            spin.style.transform = `rotate(${deg+360}deg)`
            
            if (page<totalPage) {
                page++;
            } else {
                page = 1
            }
            dispatch(actionCreators.switchSearchWord(page))
        }
     }
 }
  
 export default connect(mapStateToProps, mapDispatchToProps)(Header);
